<template>
  <div class="zhuti-container">
    <h1>
      {{ bt }}
    </h1>
    <button @click="zhi++">加</button>
    数值变换:{{ zhi }}
    <button @click="zhi--">减</button>
    <br />
    <input type="text" v-model="ss" />
    这是表单输入的值：{{ ss }}
    <br />
    <h2>
      {{ bb }}
    </h2>
    姓名： <input type="text" v-model="x" /><br />
    年龄： <input type="text" v-model="n" /><br />
    身高： <input type="text" v-model.number="s" /><br />
    体重： <input type="text" v-model.number="t" /><br />
    病史： <input type="text" v-model="b" /><br />
    <button @click="bmi = fn">诊断bmi</button>
    <button @click="fs">拿取诊断结果</button>
    <br />
    客户bmi值是:{{ bmi }}
    <br />
    <h1>客户的诊断结果为：{{ p }}</h1>
    <h2 style="color: blue">
      {{ ti }}
    </h2>
    <br />
    <h1 style="color: yellow">要桑水果店</h1>
    <button>全选</button>
    全选：<input type="checkbox" v-model="fg" />
    <ul>
      <li v-for="item in arr" :key="item.id">
        id:{{ item.id }} ===名称：{{ item.name }}=== 价格：{{
          item.jiage
        }}===数量：{{ item.num }} <input type="checkbox" v-model="item.flag" />
      </li>
    </ul>
    总价格是：{{ zj }}
  </div>
</template>

<script>
export default {
  name: 'DD',
  data () {
    return {
      bt: '要桑洗脚城5毛一次',
      zhi: 0,
      ss: '',
      bb: '要桑洗脚城洗完脚医疗诊断',
      x: '',
      n: '',
      s: '',
      t: '',
      b: '',
      bmi: 0,
      p: '',
      zj: 0,
      ti: '要桑洗脚城出来不死也得掉层皮',
      arr: [
        { id: 1, name: '苹果', jiage: 16, num: 2, flag: true, },
        { id: 2, name: '草莓', jiage: 40, num: 2, flag: true, },
        { id: 3, name: '菠萝', jiage: 80, num: 4, flag: true, },
        { id: 4, name: '西瓜', jiage: 50, num: 3, flag: true, }
      ]
    }
  },
  created () {

  },
  computed: {
    // fn () {
    //   return this.t / (this.s ^ 2)
    // },
    fg: {
      get () {
        return this.arr.filter(item=>item)
      },
      set () {

      }
    }

  },
  methods: {
    fs () {
      if (this.bmi <= 18.5) {
        this.p = '体重过轻'
      } else if (18.5 < this.bmi && this.bmi <= 24.9) {
        this.p = '正常'
      } else if (24.9 < this.bmi && this.bmi <= 29.9) {
        this.p = '体重过重'
      } else if (this.bmi > 29.9) {
        this.p = '肥胖'
      }
    },
    fd () {

    }
  }
}
</script>
<style lang='less' scoped>
</style>
